<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <p class="but sousuo"
           @click="tianjia()">添加轮播图</p>
      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="userlist"
                  empty-text="暂无数据">
          <el-table-column prop="lunbo_id"
                           label="轮播图ID"
                           width="100" />
          <el-table-column label="头像"
                           width="500">
            <template #default="scope">
              <img :src="scope.row.lunbo"
                   alt="用户头像"
                   style="width: 300px; height: 150px; ">
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small"
                         @click="handleEdittou(scope.row.lunbo_id)">更换</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleDelete(scope.row.lunbo_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>

    <!-- 更换轮播图弹窗 -->
    <el-dialog v-model="centerDialogVisible"
               width="500"
               center
               @close="cha"
               :close-on-click-modal="false">

      <div class="head_img">
        <span>选择图片:</span>
        <div>
          <el-upload ref="fileList"
                     v-model:file-list="files"
                     :action="`http://localhost:3000/api/xiulun?lunboid=${lunboid}`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :limit="1"
                     name="files"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>

        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="huanQu()">取消</el-button>
          <el-button type="primary"
                     @click="huanDing()">
            确定更换
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 增加轮播图弹窗 -->
    <el-dialog v-model="centerDialogVisible1"
               width="500"
               center
               @close="cha1"
               :close-on-click-modal="false">

      <div class="head_img">
        <span>选择图片:</span>
        <div>
          <el-upload ref="fileList1"
                     v-model:file-list="files1"
                     :action="`http://localhost:3000/api/tianlun`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview1"
                     :on-remove="handleRemove1"
                     :limit="1"
                     name="file"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible1">
            <img width="100%"
                 :src="dialogImageUrl1"
                 alt="" />
          </el-dialog>

        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="huanQu1()">取消</el-button>
          <el-button type="primary"
                     @click="huanDing1()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除提示框 -->
    <el-dialog v-model="shanactive"
               :close-on-click-modal="false"
               title="是否确定删除该张轮播图？"
               width="500"
               center>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="shanactive = false">取消</el-button>
          <el-button type="primary"
                     @click="shanque()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
// 轮播图数据
let list = ref([])
let userlist = ref([])

//轮播图id
let lunboid = ref('')

// 弹窗
let centerDialogVisible = ref(false)
let centerDialogVisible1 = ref(false)
/**
 *
 * 图片上传
 */

//文件列表
let files = ref([])
//ref绑定，可以访问el-upload自己的方法
let fileList = ref(null)
//预览图片文件名
let dialogImageUrl = ref('')
//预览展示
let dialogVisible = ref(false)
//删除已选择的文件
let handleRemove = () => {
  // console.log(file, fileList)
  // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
}
//从列表赋值给预览图片
let handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

//文件列表
let files1 = ref([])
//ref绑定，可以访问el-upload自己的方法
let fileList1 = ref(null)
//预览图片文件名
let dialogImageUrl1 = ref('')
//预览展示
let dialogVisible1 = ref(false)
//删除已选择的文件
let handleRemove1 = () => {
  // console.log(file, fileList)
  // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
}
//从列表赋值给预览图片
let handlePictureCardPreview1 = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
/**
 *
 * 图片上传
 */
//更换轮播图
const handleEdittou = (id) => {
  centerDialogVisible.value = true
  lunboid.value = id
  // console.log(id)
}
const huanQu = () => {
  centerDialogVisible.value = false
  fileList.value.handleRemove(files.value)
  files.value = []
}
let cha = () => {
  centerDialogVisible.value = false
  fileList.value.handleRemove(files.value)
  files.value = []
  // console.log(files.value)
}
let huanDing = () => {
  if (files.value.length == 0) {
    ElMessage({
      message: '请选择图片',
      type: 'error'
    })
  } else {
    fileList.value.submit()
    centerDialogVisible.value = false
    fileList.value.handleRemove(files.value)
    files.value = []
    ElMessage({
      message: '轮播图更换成功',
      type: 'success'
    })
    setTimeout(() => {
      axios
        .get('/shouye')
        .then((d) => {
          //过滤数据
          list.value = d
          userlist.value = list.value
          // console.log(userlist.value)
        })
        .catch((err) => console.log(err))
    }, 100)
  }
}
//添加轮播图
const tianjia = () => {
  centerDialogVisible1.value = true
}
//增加轮播图
const huanQu1 = () => {
  centerDialogVisible1.value = false
  fileList1.value.handleRemove(files1.value)
  files1.value = []
}
let cha1 = () => {
  centerDialogVisible1.value = false
  fileList1.value.handleRemove(files1.value)
  files1.value = []
}
let huanDing1 = () => {
  if (files1.value.length == 0) {
    ElMessage({
      message: '请选择图片',
      type: 'error'
    })
  } else {
    fileList1.value.submit()
    centerDialogVisible1.value = false
    fileList1.value.handleRemove(files1.value)
    files1.value = []
    ElMessage({
      message: '轮播图增加成功',
      type: 'success'
    })
    setTimeout(() => {
      axios
        .get('/shouye')
        .then((d) => {
          //过滤数据
          list.value = d
          userlist.value = list.value
          // console.log(userlist.value)
        })
        .catch((err) => console.log(err))
    }, 100)
  }
}

//删除轮播图
let shanactive = ref(false)
const handleDelete = (index) => {
  lunboid.value = index
  shanactive.value = true
}
const shanque = () => {
  axios
    .post('/lunshan', { lunboid: lunboid.value })
    .then((d) => {
      if (d == '轮播图删除成功！') {
        ElMessage({
          message: `${lunboid.value}轮播图删除成功。`,
          type: 'success'
        })
        lunboid.value = ''
        shanactive.value = false
        setTimeout(() => {
          axios
            .get('/shouye')
            .then((d) => {
              //过滤数据
              list.value = d
              userlist.value = list.value
              // console.log(userlist.value)
            })
            .catch((err) => console.log(err))
        }, 100)
      }
    })
    .catch((err) => console.log(err))
}
onMounted(() => {
  axios
    .get('/shouye')
    .then((d) => {
      //过滤数据
      list.value = d
      userlist.value = list.value
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.head_img {
  width: 450px;
  display: flex;
  margin: 10px 0;
  span {
    margin-right: 20px;
  }
}
.sousuo {
  // width: 60px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
</style>

